<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2149389_l67wmj67vtq.css">
    <script src="lib/jquery-3.2.1.js"></script>
</head>
<body>
    <div class="header">
        <div class="header-nav">
            <span class="header-left">
                <a href="#">小米网</a>
                <a href="#">MIUI</a>
                <a href="#">米聊</a>
                <a href="#">游戏</a>
                <a href="#">多看阅读</a>
                <a href="#">云服务</a>
                <a class="bg" href="#">小米网移动版</a>
                <a class="bg" href="#">Select region</a>
                <a class="bg" id="lastbg" href="#">米粉节答疑</a>
            </span>
            <span class="header-right">
                <a href="#">注册</a>
                <a href="#">登录</a>
            </span>
        </div>
    </div>
    <div class="header-search">
        <div class="header-logo"></div>
        <div class="search">
            <input class="input1" type="text" placeholder="搜索您需要的商品">
            <a href="#">小米手环</a>
            <a href="#">耳机音箱</a>
            <a href="#">保护壳</a>
            <div class="btn"><button></button></div>
        </div>
        <div class="shopcar">
            <a href="#">购物车</a>
        </div>
        <div class="header-right-word"><a href="#">4月14日开放购买</a></div>
    </div>
    <div class="main">
        <div class="main-left">
            <div class="main-left1">
                <a href="#">全部商品分类</a>
            </div>
            <div>
                <p><a id="main-left3" href="#">购买手机</a></p>
                <p>
                    <a href="#">小米Noto</a>
                    <a href="#">小米4</a>
                    <a href="#">红米</a>
                    <a href="#">红米Noto</a>
                </p>
            </div>
            <div>
                <p><a id="main-left3" href="#">购买电视与平板</a></p>
                <p>
                    <a href="#">小米电视</a>
                    <a href="#">小米盒子</a>
                    <a href="#">小米平板</a>
                </p>
            </div>
            <div>
                <p><a id="main-left3" href="#">路由器与只能硬件</a></p>
                <p>
                    <a href="#">路由器</a>
                    <a href="#">体重秤</a>
                    <a href="#">净化器与滤芯</a>
                </p>
            </div>
            <div>
                <p><a id="main-left3" href="#">插线板、移动电源与电池</a></p>
                <p>
                    <a href="#">小米移动电源</a>
                    <a href="#">电池</a>
                    <a href="#">充电器</a>
                </p>
            </div>
            <div>
                <p><a id="main-left3" href="#">耳机音箱与存储卡</a></p>
                <p>
                    <a href="#">小米头戴式耳机</a>
                    <a href="#">小米活塞耳机</a>
                </p>
            </div>
            <div>
                <p><a id="main-left3" href="#">保护套与贴膜</a></p>
                <p>
                    <a href="#">保护套/保护壳</a>
                    <a href="#">贴膜</a>
                    <a href="#">防尘塞</a>
                </p>
            </div>
            <div>
                <p><a id="main-left3" href="#">后盖与个性化配件</a></p>
                <p>
                    <a href="#">米键</a>
                    <a href="#">后盖</a>
                    <a href="#">贴纸</a>
                    <a href="#">手机支架</a>
                </p>
            </div>
            <div id="main-left2">
                <p><a id="main-left3" href="#">小米生活方式</a></p>
                <p>
                    <a href="#">服装</a>
                    <a href="#">米兔</a>
                    <a href="#">背包</a>
                    <a href="#">生活周边</a>
                </p>
            </div>
        </div>
        <div class="main-right">
            <div class="main-right1">
                <a href="#">首页</a>
                <a href="#">小米手机</a>
                <a href="#">红米</a>
                <a href="#">小米平板</a>
                <a href="#">小米电视</a>
                <a href="#">盒子</a>
                <a href="#">路由器</a>
                <a href="#">合约机</a>
                <a href="#">服务</a>
                <a href="#">社区</a>
            </div>
            <div class="content">
                <div id="list">
                    <img src="images/banner5.png" alt="">
                    <img src="images/banner2.png" alt="">
                    <img src="images/banner3.png" alt="">
                    <img src="images/banner4.png" alt="">
                    <img src="images/banner1.png" alt="">
                </div>
                <button id="prev"></button>
                <button id="next"></button>
                <div id="btns">
                    <span class="current">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                </div>
            </div>
            <div class="photo">
                <span class="photo1"></span>
                <span class="photo2"></span>
                <span class="photo3"></span>
            </div>
        </div>
    </div>
    <div class="center">
        <p><a href="#">小米明星单品</a></p>
        <p><a id="small-word" href="#">根据机型选配件</a></p>
    </div>
    <div class="center-photo">
        <span class="center-photo1"></span>
        <span class="center-photo2"></span>
        <span class="center-photo3"></span>
        <span class="center-photo4"></span>
        <div class="center-word1">
            <p id="center-word">小米智能插座</p>
            <p>让普通家电变得智能</p>
        </div>
        <div class="center-word2">
            <p id="center-word">小米空气净化器</p>
            <p>高性能智能空气净化器立即预约</p>
        </div>
        <div class="center-word3">
            <p id="center-word">小米活塞耳机简装版</p>
            <p>好声音源自活塞式音腔，延续经典设计</p>
        </div>
        <div class="center-word4">
            <p id="center-word">小米路由器</p>
            <p>顶级双屏幕AC智能路由器，内置1TB大硬盘</p>
        </div>
    </div>
    <div class="center-nav">
        <p>新品上架</p>
        <p>更多&gt;</p>
    </div>
    <div class="last-main">
        <div class="last-left">
            <div class="content1">
                <div class="one">
                </div>
                <div class="two">
                    <p class="tx">小米手环</p>
                    <p>79元</p>
                </div>
            </div>
            <div class="content2">
                <div class="three">
                    <div class="three-left">
                        <div>
                            <p>五周年米兔钥匙扣</p>
                            <p id="tx1">9.9元</p>
                        </div>
                        <div>
                            <p>QCY派Q8蓝牙耳机</p>
                            <p id="tx1">59.9元</p>
                        </div>
                    </div>
                    <div>
                        <p class="tx">小米T恤路标MILOGO</p>
                        <p>39元</p>
                    </div>
                </div>
                <div class="four">
                    <p class="tx">小米4实木后盖</p>
                    <p>69元</p>
                </div>
            </div>
            <div class="content3">
                <div>
                    <p class="tx">小米Note超薄保护壳</p>
                    <p>49元</p>
                </div>
                <div>
                    <p class="tx">小米自拍杆</p>
                    <p>49元</p>
                </div>
                <div>
                    <p class="tx">先锋CL31系列耳式耳机</p>
                    <p>99元</p>
                </div>
            </div>
        </div>
        <div class="last-right">
            <div class="right-top right-1">
                <p>特价商品</p>
                <p id="tx2">SanDisk32G存储卡</p>
                <p>79元<a href="#" id="tx3"><s>109元</s></a></p>
                <p>还有更多特价商品</p>
            </div>
            <div class="right-top right-2">
                <p id="tx2">特惠配件套餐</p>
                <p>手机必备配件组合购买</p>
                <p>实惠更优惠</p>
            </div>
            <div class="right-top right-3">
                <p id="tx2">我爱酷玩</p>
                <p>邂逅炫酷的电子产品</p>
                <p>结交趣味相投的朋友</p>
            </div>
            <p id="tx-p"><a href="#">企业用户采购通道</a>
                <a href="#" id="gt">&gt;</a>
            </p>
            <p><a href="#">小米手机防伪查询</a><a href="#" id="gt">&gt;</a></p>
            <p><a href="#">小米手机官翻版</a><a href="#" id="gt">&gt;</a></p>
            <p><a href="#">小米路由器官翻版</a><a href="#" id="gt">&gt;</a></p>
            <p><a href="#">米粉红包</a><a href="#" id="gt">&gt;</a></p>
            <div class="seclect">
                <p><a id="chongzhi" href="#">话费充值</a></p>
                <input type="text" placeholder="请输入手机号">
                <select name="" id="" class="select">
                    <option value="money">100元</option>
                    <option value="money">50元</option>
                    <option value="money">30元</option>
                </select>
                <p><a href="#">实付价格98.4元起</a></p>
                <input type="submit" name="" value="立即充值" id="input1">
            </div>
        </div>
        <div class="foot"></div>
    </div>
    <div class="foot">
        <div class="footer">
            <div class="footer-top">
                <a href="#">1小时快修服务</a>
                <a href="#">7天无理由退货</a>
                <a href="#">15天免费换货</a>
                <a href="#">满150元包邮</a>
                <a href="#">520余家售后网点</a>
                <i class="iconfont icon-weixiudanliuzhuanbeifenxiugai"></i>
                <i class="iconfont icon-tubiaozhizuomoban"></i>
                <i class="iconfont icon-shuaxin"></i>
                <i class="iconfont icon-liwu"></i>
                <i class="iconfont icon-wangdianhao"></i>
            </div>
            <div class="footer-center">
                <div class="ml">
                    <p><a id="txp" class="txp" href="#">帮助中心</a></p>
                    <p><a href="#">购物指南</a></p>
                    <p><a href="#">支付方式</a></p>
                    <p><a href="#">配送方式</a></p>
                </div>
                <div>
                    <p><a id="txp" class="txp" href="#">服务支持</a></p>
                    <p><a href="#">售后政策</a></p>
                    <p><a href="#">自助服务</a></p>
                    <p><a href="#">相关下载</a></p>
                </div>
                <div>
                    <p><a id="txp" class="txp" href="#">小米之家</a></p>
                    <p><a href="#">小米之家</a></p>
                    <p><a href="#">服务网站</a></p>
                    <p><a href="#">预约亲临到店服务</a></p>
                </div>
                <div>
                    <p><a id="txp" class="txp" href="#">关于小米</a></p>
                    <p><a href="#">了解小米</a></p>
                    <p><a href="#">加入小米</a></p>
                    <p><a href="#">联系我们</a></p>
                </div>
                <div>
                    <p><a id="txp" class="txp" href="#">关注我们</a></p>
                    <p><a href="#">新浪微博</a></p>
                    <p><a href="#">小米部落</a></p>
                    <p><a href="#">官方微博</a></p>
                </div>
                <div id="double">
                    <p class="number">400-100-5678</p>
                    <p>周一至周日8：00-18：00</p>
                    <p>(仅收市话费)</p>
                    <button>24小时在线客服</button>
                </div>
            </div>
            <div class="footer-bottom">
                <p>
                    <a href="#">小米旗下网站:小米网</a>
                    <a href="#" class="a-1">MIUI</a>
                    <a href="#" class="a-1">米聊</a>
                    <a href="#" class="a-2">多看书城</a>
                    <a href="#" class="a-4">小米路由器</a>
                    <a href="#" class="a-2">繁体香港</a>
                    <a href="#" class="a-2">繁体台湾</a>
                    <a href="#" class="a-2">English</a>
                    <a href="#" class="a-2">小米后院</a>
                    <a href="#" class="a-4">小米天猫店</a>
                    <a href="#" class="a-3">小米淘宝直营店</a>
                    <a href="#" class="a-2">小米网盟</a>
                </p>
                <p id="footer-p">&copy;mi.com京ICP证110507号 京ICP备10046444号 京公网安备1101080212535号 京网文[2014]0059-0009号</p>
                <div class="picture1"></div>
                <select name="" id="" class="select-last">
                    <option value="money">简体中文</option>
                    <option value="money">繁体中文</option>
                    <option value="money">English</option>
                </select>
            </div>
        </div>
    </div>
    <script>
        // 3.焦点随按钮改变
        var index = 0;
        $("#next").click(function(){
            index++;
            if(index>4){
                index=0;
            }
            console.log(index)
            animate(index);
        })
        $("#prev").click(function(){
           index--;
           if(index<0){
               index=4;
           }
           console.log(index)
           animate(index);
        })
        $("#btns span").click(function(){
            index = $(this).index();
            console.log(index)
            animate(index);
        })
        function animate(index) {
            $("#list img").eq(index).fadeIn().siblings().fadeOut()
            $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
        }
        function play() {
                timer = setInterval(function () {
                    $("#next").click()
                }, 3000)
            }
            function stop() {
                clearInterval(timer)
            }
            $(".content").mouseover(function(){
                stop();
            })
            $(".content").mouseout(function(){
                play();
            })
            play();
            $(".input1").focus(function(){
                $(".search>a").addClass("change");
            }).blur(function(){
                $(".search>a").removeClass("change");
            })
    </script>
</body>
</html>